<template>
	<div class="receivables">
		<div class="overlay">
			<div class="overlay-content scrolling">
				<van-nav-bar title="收款" left-text left-arrow @click-left="$router.back()">
				</van-nav-bar>
				<div class="popup">
					<div class="popupQian">
						<div class="popupTop">
							<img class="xiaoxiong" src="../../assets/images/xiaoxiong_03.png" alt="">
							<p class="qianName" v-text="receipt.walletName"></p>
							<p class="qianShuo">
								<span v-text="receipt.address"></span>
								<img class="fuzhi" src="../../assets/images/fuzhi_03.png" alt="" :data-clipboard-text="receipt.address" v-show="receipt.address" @click="copy">
							</p>
						</div>
						<div class="popupContent">
							<p><span v-text="receipt.title === nudefined ? '' : receipt.title"></span></p>
							<p><img :src="receipt.collectionCode" alt=""></p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { assets } from '../../utils/api.js'
	export default {
		data() {
			return {
				receipt: {},
			}
		},
		created() {

		},
		mounted() {
			assets.getReceipt({
				address: localStorage.address
			}).then(res => {
				if(res.code == 200) {
					this.receipt = res.data;
				}
			})
		},
		methods: {
			copy() {
				let clipboard = new ClipboardJS('.fuzhi')
				clipboard.on('success', e => { 
					this.$toast('复制成功');
					clipboard.destroy();
				})
				clipboard.on('error', e => { 
					this.$toast('复制失败');
					clipboard.destroy();
				})
			}
		},
	};
</script>

<style lang="less" scoped>
	.receivables {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .7);
	}
	
	.popup {
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		width: 100%;
	}
	
	.popupQian {
		width: 90%;
		margin: 0 auto;
		position: relative;
		.popupTop {
			height: 85px;
			background-color: #0693c2;
			border-radius: 10px 10px 0 0;
			color: #fff;
			.xiaoxiong {
				width: 30px;
				height: 30px;
				position: absolute;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			.qianName {
				position: absolute;
				top: 35px;
				left: 50%;
				transform: translateX(-50%)
			}
			.qianShuo {
				position: absolute;
				top: 60px;
				left: 50%;
				transform: translateX(-50%);
				font-size: 12px;
				width: 100%;
				text-align: center;
			}
			.fuzhi {
				width: 12px;
			}
		}
		.popupContent {
			width: 100%;
			background: #FFFFFF;
			text-align: center;
			border-radius: 0px 0px 10px 10px;
			
			p:first-child{
				padding-top: 35px;
			}
			
			p:last-child{
				padding-bottom: 20px;
			}
			
			span{
				font-size: 16px;
			}
		}
	}
	
	.van-popup--center {
		border-radius: 10px;
	}
	
	.van-popup {
		overflow-y: visible;
	}
	
	.van-nav-bar {
		background: transparent !important;
		.van-nav-bar__title {
			color: #FFFFFF;
		}
		.van-icon {
			color: #FFFFFF !important;
		}
	}
	
	/deep/ .van-hairline--bottom::after {
		border-bottom-width: 0 !important;
	}
</style>